import { watch, Ref } from 'vue'
import { filter, includes } from 'lodash'
import { Option } from '@/components/Form/types'
import { FormItemKey, ObjectType } from 'typings/interfaces'

interface Params {
  key: FormItemKey,
  form: ObjectType,
  option: Ref<Option[]>,
  primevalOption: Option[],
  watchKey: FormItemKey,
  dictMap: Record<string, string[]>,
}

const useFilterOption = ({ watchKey, key, form, option, dictMap, primevalOption }: Params) => {
  watch(() => form[watchKey], (value) => {
    form[key] = undefined
    if (dictMap[value]) {
      option.value = filter(primevalOption, ({ itemValue }) => includes(dictMap[value], itemValue))
    } else {
      option.value = primevalOption
    }
  })
  const value = form[watchKey]
  if (value) {
    option.value = filter(primevalOption, ({ itemValue }) => includes(dictMap[value], itemValue))
  }
}

export default useFilterOption
